<template>
    <n-tabs type="line">
        <n-tab-pane name="basic" tab="基本信息">
            <div class="row">
                <div class="label">名称</div>
                <n-input v-model:value="name" />
            </div>
            <div class="row">
                <div class="label">说明</div>
                <n-input type="textarea" v-model:value="remark" />
            </div>
            <div class="row">
                <div class="label">上传更改</div>
                <n-upload accept="image/jpg,image/png,image/jpeg,image/gif" @before-upload="beforeUpload" :max="1">
                    <n-button>上传图片</n-button>
                </n-upload>
            </div>
            <div class="row" v-if="img">
                <div class="label">预览</div>
                <img :src="img? img:''" alt="" srcset="">
            </div>
        </n-tab-pane>
        <n-tab-pane name="code" tab="控件代码">
            <monaco-editor v-model:modelValue="code" height="540px" language="html" />
        </n-tab-pane>
        <n-tab-pane name="data" tab="测试数据">
            <monaco-editor v-model:modelValue="data" height="540px" language="javascript" />
        </n-tab-pane>
        <n-tab-pane name="designData" tab="相关配置">
            <monaco-editor v-model:modelValue="design_data" height="540px" language="javascript" />
        </n-tab-pane>
    </n-tabs>
</template>
<script lang="ts" setup>
import { toRefs,ref } from 'vue'
import { MonacoEditor } from '@/components/Pages/MonacoEditor'
import { UploadFileInfo, useMessage } from 'naive-ui';
const props = defineProps(['data'])
const { name, remark, code, data,img, design_data } = toRefs(props.data)


const message = useMessage();


const beforeUpload = (data: {file:UploadFileInfo,fileList: UploadFileInfo[]}) => {
    console.log("上传？？",data.file);

    if(data.file.file?.type !== 'image/png'){
        message.error("只能上传png格式的图片文件，请重新上传")
        return false
    }else{
        
        
        let reader = new FileReader();
        let _file = data.file.file;
        if(determineVolume(_file.size)){
            console.log("这里的file是",_file);
            reader.readAsDataURL(_file);
            reader.onload = async res => {
                console.log("res",res);
                let _imgbase64 = await res.target?.result;
                console.log("base64??",_imgbase64);
                props.data.imgBase64 = _imgbase64;
            }
            return true
        }
    }
}


const determineVolume = (currentVolume: number) => {
    console.log("判断？",currentVolume);
    let maxSize = 2 * 1024;  // 2M
    let size = currentVolume / 1024;
    console.log("size??",size);
    if(size > maxSize){
        message.error("附件大小不能大于"+maxSize / 1024 + 'M');
        return false;
    }
    if(size <= 0){
        message.error("附件大小不能为0M!");
        return false;
    }
    return true;
}
</script>

<style lang="scss" scoped>
.row {
    display: flex;
    margin-bottom: 12px;

    .label {
        width: 120px;
    }

    .fill {
        flex: 1 1 0%
    }
}


</style>